// components/talent-simulator/index.ts
Component({

  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    telnetRowList: [
      {
        "rowIndex": 0,
        telnets: [
          {
            "id":"1",
            "rowIndex": 0,
            "columnIndex": 0,
            "imgUrl": "https://wow.shuzhipeixian.com:12812/download/wow_collect/news/ajV1m8kiRdjf0f7bc1dd1ab69b96943b870712e5005b.png",
            "shape": "circle",
            "description": "技能说明",
          },
          {
            "id":"123",
            "rowIndex": 0,
            "columnIndex": 0,
            "imgUrl": "https://wow.shuzhipeixian.com:12812/download/wow_collect/news/ajV1m8kiRdjf0f7bc1dd1ab69b96943b870712e5005b.png",
            "shape": "circle",
            "description": "技能说明",
          },
        ]
      },
      {
        "rowIndex": 0,
        telnets: [
          {
            "id":"1234",
            "rowIndex": 0,
            "columnIndex": 0,
            "imgUrl": "https://wow.shuzhipeixian.com:12812/download/wow_collect/news/ajV1m8kiRdjf0f7bc1dd1ab69b96943b870712e5005b.png",
            "shape": "circle",
            "description": "技能说明",
          }
        ]
      }
    ]
  },
  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () {
        console.log("模拟器显示");
        
     },
    hide: function () { },
    resize: function () { },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    clickTalent(e:any){
      console.log("点击事件",e)
      const query = wx.createSelectorQuery()
                    .in(this)
      query
            .select("#myCanvas").fields({ node: true, size: true })
            .selectAll(".telnet_image").boundingClientRect()
        .exec((res) => {
          console.log(res);
          const canvas = res[0].node
          // 渲染上下文
          const ctx = canvas.getContext('2d')
          const dpr = wx.getSystemInfoSync().pixelRatio
          canvas.width = res[0].width * dpr
          canvas.height = res[0].height * dpr
          ctx.scale(dpr, dpr)
          // this.drawArrowLink(ctx,res[1][0],res[1][2]);
          this.drawArrowLink(ctx,res[1][1],res[1][2]);
          this.drawStraightLinkRed(ctx,res[1][1],res[1][2]);
        })
    },
    drawArrowLink(ctx:any, startNode:any, endNode:any) {
      // 绘制连线
      this.drawStraightLink(ctx, startNode, endNode);
    
      // // 计算箭头的角度和长度
      // const dx = endNode.left - startNode.left;
      // const dy = endNode.top - startNode.top;
      // const length = Math.sqrt(dx * dx + dy * dy);
      // const angle = Math.atan2(dy, dx);
    
      // // 箭头的大小和角度调整
      // const arrowSize = 10;
      // const arrowAngle = Math.PI / 6;
    
      // // 绘制箭头
      // ctx.beginPath();
      // ctx.moveTo(endNode.left, endNode.top);
      // ctx.lineTo(endNode.left - arrowSize * Math.cos(angle - arrowAngle), endNode.top - arrowSize * Math.sin(angle - arrowAngle));
      // ctx.lineTo(endNode.left - arrowSize * Math.cos(angle + arrowAngle), endNode.top - arrowSize * Math.sin(angle + arrowAngle));
      // ctx.closePath();
      // ctx.fillStyle = 'gray';
      // ctx.fill();
    },
    drawStraightLink(ctx:any, startNode:any, endNode:any) {
      ctx.beginPath();
      console.log("起点：" + startNode.left + "," + startNode.top)
      console.log("终点" + endNode.left + "," + endNode.top)
      ctx.moveTo(startNode.left+ (startNode.width/2), startNode.top+startNode.height);
      ctx.lineTo(endNode.left+ (endNode.width/2) ,endNode.top);
      ctx.strokeStyle = 'grey';
      ctx.lineWidth = 4;
      ctx.stroke();
    },

    drawStraightLinkRed(ctx:any, startNode:any, endNode:any) {
      ctx.beginPath();
      console.log("起点：" + startNode.left + "," + startNode.top)
      console.log("终点" + endNode.left + "," + endNode.top)
      ctx.moveTo(startNode.left+ (startNode.width/2), startNode.top+startNode.height);
      ctx.lineTo(endNode.left+ (endNode.width/2) ,endNode.top);
      ctx.strokeStyle = 'red';
      ctx.lineWidth = 4;
      ctx.stroke();
    }
  },
})